<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 工序管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box" ref="searchRef">
        <el-select v-model="query.operationType" placeholder="操作类型" prop="operationType" filterable class="handle-select mr10" >
          <el-option
              v-for="item in operationTypeOptions"
              :key="item.code"
              :label="item.value"
              :value="item.code">
          </el-option>
        </el-select>
        <el-select v-model="query.taskType" clearable filterable placeholder="任务类型" class="handle-select mr10">
          <el-option
              v-for="item in taskTypeOptions"
              :key="item.code"
              :label="item.value"
              :value="item.code">
          </el-option>
        </el-select>
        <el-select v-model="query.processingStatus" clearable filterable placeholder="处理进度" class="handle-select mr10">
          <el-option
              v-for="item in processingStatusOptions"
              :key="item.code"
              :label="item.value"
              :value="item.code">
          </el-option>
        </el-select>
        <el-select v-model="query.resultStatus" clearable filterable placeholder="结果状态" class="handle-select mr10">
          <el-option
              v-for="item in resultStatusOptions"
              :key="item.code"
              :label="item.value"
              :value="item.code">
          </el-option>
        </el-select>
        <el-input placeholder="请输入内容" v-model="query.searchValue" class="handle-input mr10">
          <el-select v-model="query.searchType" slot="prepend" placeholder="请选择" class="handle-select">
            <el-option label="文件名" value="1"></el-option>
            <el-option label="创建人" value="2"></el-option>
          </el-select>
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh-right" @click="resetQuery">重置</el-button>
      </div>
      <el-table
          :data="tableData"
          border
          height="580"
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
      >
        <el-table-column prop="id" label="ID" width="85"/>
        <el-table-column label="文件名" width="305">
          <template slot-scope="scope">
            <p v-if="scope.row.fileUrl"><a :href="scope.row.fileUrl">{{scope.row.fileName}}</a></p>
            <p v-else>{{scope.row.fileName}}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作类型">
          <template slot-scope="scope">
            <p v-if="scope.row.operationType === 1"><span style="color: #e270a1">导入</span></p>
            <p v-if="scope.row.operationType === 2"><span style="color: #2bded0">导出</span></p>
          </template>
        </el-table-column>
        <el-table-column  label="任务类型" width="255">
          <template slot-scope="scope">
            <p>{{getName(scope.row.taskType,taskTypeOptions)}}</p>
          </template>
        </el-table-column>
        <el-table-column  label="处理状态">
          <template slot-scope="scope">
            <p v-if="scope.row.processingStatus === 0"><span style="color: #c23b6b">待处理</span></p>
            <p v-if="scope.row.processingStatus === 1"><span style="color: #e6bc3c">处理中</span></p>
            <p v-if="scope.row.processingStatus === 2"><span style="color: #6cf573">已完成</span></p>
          </template>
        </el-table-column>
        <el-table-column  label="处理结果">
          <template slot-scope="scope">
            <p v-if="scope.row.resultStatus === 1"><span style="color: #67C23A">全部成功</span></p>
            <p v-if="scope.row.resultStatus === 2"><span style="color: #E6A23C">部分成功</span></p>
            <p v-if="scope.row.resultStatus === 3"><span style="color: #F56C6C">全部失败</span></p>
          </template>
        </el-table-column>
        <el-table-column  label="结果详情"  width="255">
          <template slot-scope="scope">
            <p><b>创建时间：</b>{{$moment(new Date(scope.row.createTime)).format("YYYY-MM-DD HH:mm:ss")}}</p>
            <p><b>完成时间：</b><span v-if="scope.row.processingStatus === 2">{{$moment(new Date(scope.row.modifyTime)).format("YYYY-MM-DD HH:mm:ss")}}</span></p>
            <p v-if="scope.row.errorMsg"><b>失败原因：</b>{{scope.row.errorMsg}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="创建人"></el-table-column>
        <el-table-column  label="下载结果" width="255">
          <template slot-scope="scope">
            <p v-if="scope.row.fileSuccUrl"><a :href="scope.row.fileSuccUrl">下载结果</a></p>
            <p v-if="scope.row.fileFailUrl"><a :href="scope.row.fileFailUrl">失败结果</a></p>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="query.pageNumber"
            :page-sizes="[10,20, 30, 50, 100]"
            :page-size="query.pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryFileTask
} from "@/api/bookservice";
export default {
  name: 'basetable',
  data() {
    return {
      query: {
        fileName: '',
        operationType: null,
        taskType: null,
        processingStatus: null,
        resultStatus: null,
        creator:'',
        searchType:"1",
        searchValue:"",
        pageNumber: 1,
        pageSize: 10
      },
      operationTypeOptions:[
        {
          code:1,
          value:"导入",
        },
        {
          code:2,
          value:"导出",
        }
      ],
      taskTypeOptions:[
        {
          code:1,
          value:"书本信息导出",
        },
        {
          code:2,
          value:"批量修改书本状态",
        },
        {
          code:3,
          value:"批量上报书本信息",
        }
      ],
      processingStatusOptions:[
        {
          code:0,
          value:"未处理",
        },
        {
          code:1,
          value:"处理中",
        },
        {
          code:2,
          value:"已完成",
        }
      ],
      resultStatusOptions:[
        {
          code:1,
          value:"全部成功",
        },
        {
          code:2,
          value:"部分成功",
        },
        {
          code:3,
          value:"全部失败",
        }
      ],
      tableData: [],
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      if(this.query.searchValue){
        if(this.query.searchType === "1"){
          this.query.fileName = this.query.searchValue;
        }
        if(this.query.searchType === "2"){
          this.query.creator = this.query.searchValue;
        }
      }
      queryFileTask(this.query,this.query.pageNumber,this.query.pageSize).then((res) => {
        this.tableData = res.data.list;
        this.pageTotal = res.data.total || 0;
      });
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'pageNumber', 1);
      this.getData();
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageNumber', val);
      this.getData();
    },
    // 分页导航
    handleSizeChange(val) {
      this.$set(this.query, 'pageSize', val);
      this.getData();
    },
    getName(code,options){
      for (let option of options) {
        if(option.code===code){
          return option.value;
        }
      }
      return null;
    },
    formatDate(row, column, cellValue){
      let d = new Date(cellValue);
      return this.$moment(d).format("YYYY-MM-DD HH:mm:ss")
    },
    resetQuery(){
      this.query =  this.$options.data().query;
    }
  }
};
</script>

<style scoped>

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 600px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.mr20 {
  margin-right: 20px;
}
.table-td-thumb {
  display: inline-block;
  margin: 5px 5px 5px 5px;
  width: 40px;
  height: 40px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
